<template>
  <div
    class="memory-node"
    :style="{ paddingLeft: `${node.depth * 16 + 8}px` }"
    @click.stop="toggle"
  >
    <div class="node-content">
      <span class="toggle-icon">
        <template v-if="node.children.length">
          {{ node.isExpanded ? '▼' : '▶' }}
        </template>
      </span>

      <span class="node-name">
        <HighlightText :text="node.name" :query="searchTerm" />
      </span>

      <span class="node-type">
        {{ node.type }}
      </span>

      <span class="node-size">
        {{ formatSize(node.totalSize) }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import HighlightText from './HighlightText.vue'

defineProps<{
  node: HeapNode
  searchTerm: string
}>()

const emit = defineEmits(['toggle'])

const toggle = () => {
  emit('toggle')
}

const formatSize = (bytes: number) => {
  return `${(bytes / 1024).toFixed(2)} KB`
}
</script>

<style scoped>
.memory-node {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.9em;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.memory-node:hover {
  background: #f8f9fa;
}

.node-content {
  display: grid;
  grid-template-columns: 4fr 2fr 1fr;
  width: 100%;
}

.toggle-icon {
  width: 16px;
  margin-right: 4px;
}

.node-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-type {
  color: #5f6368;
}

.node-size {
  text-align: right;
  font-feature-settings: 'tnum';
}
</style>